<template>
	<view class="text-white">
		<text class="fs-15">{{props.title}}</text>
		<view class="flex flex-wrap grid-gap-8 mt-10 fs-13">
			<view v-for="(item,index) in props.list" :key='index' @click="change(item,index)"
				:class="item[props.field]==props.modelValue ?'bg-blue border-white':'bg-grey border-grey'"
				class=" round-30  px-20 py-8  block">{{item.label}}</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const props = defineProps({
		modelValue: {
			type: [Number, String],
			default: ''
		},
		list: {
			type: Array,
			default: []
		},
		field: {
			type: String,
			default: 'value'
		},
		title: {
			type: String,
			default: '创作类型'
		}
	})
	const emit = defineEmits(['update:modelValue', 'change'])
	const change = (e, i) => {
		emit('update:modelValue', e[props.field])
		emit('change', e[props.field])
	}
</script>

<style>
</style>